<template>
  <div v-loading.fullscreen.lock="loading">
    <div class="box-card">
      <div class="title">企业信息</div>
      <div class="box-info">
        <div class="box-info-item"><span class="label">货主类型:</span> <span class="value">{{detail.ownerTypeDesc}}</span></div>
        <div class="box-info-item"><span class="label">公司名称:</span> <span class="value">{{detail.companyName}}</span></div>
        <div class="box-info-item"><span class="label">关联团油商户:</span> <span class="value">{{detail.tuanyouCompanyName}}</span></div>
        <div class="box-info-item"><span class="label">统一信用代码:</span> <span class="value">{{detail.certificateNo}}</span></div>
        <div class="box-info-item"><span class="label">法人姓名:</span> <span class="value">{{detail.legalPerson}}</span></div>
        <div class="box-info-item"><span class="label">联系人姓名:</span> <span class="value">{{detail.contact}}</span></div>
        <div class="box-info-item"><span class="label">联系人电话:</span> <span class="value">{{detail.contactPhone}}</span></div>
        <div class="box-info-item"><span class="label">所属区域:</span> <span class="value">{{detail.provinceName}}{{detail.cityName}}{{detail.countyName}}</span></div>
        <div class="box-info-item"><span class="label">详细地址:</span> <span class="value">{{detail.detailAddress}}</span></div>
        <div class="box-info-item"><span class="label">开户名称:</span> <span class="value">{{detail.accountName}}</span></div>
        <div class="box-info-item"><span class="label">开户银行:</span> <span class="value">{{detail.accountBank}}</span></div>
        <div class="box-info-item"><span class="label">开户支行:</span> <span class="value">{{detail.accountBankBranch}}</span></div>
        <div class="box-info-item"><span class="label">银行卡号:</span> <span class="value">{{detail.account}}</span></div>
      </div>
      <div class="img-box">
        <div class="img-box-item" v-if="detail.picIdCardA">
          <el-image append-to-body hide-on-click-modal :src="detail.picIdCardA" :preview-src-list="[detail.picIdCardA]"></el-image>
          <span class="label">身份证人像页</span>
        </div>
        <div class="img-box-item" v-if="detail.picIdCardB">
          <el-image append-to-body hide-on-click-modal :src="detail.picIdCardB" :preview-src-list="[detail.picIdCardB]"></el-image>
          <span class="label">身份证国徽页</span>
        </div>
        <div class="img-box-item" v-if="detail.picLicense">
          <el-image append-to-body hide-on-click-modal :src="detail.picLicense" :preview-src-list="[detail.picLicense]"></el-image>
          <span class="label">营业执照</span>
        </div>
        <div class="img-box-item" v-if="detail.picDangerTrans">
          <el-image append-to-body hide-on-click-modal :src="detail.picDangerTrans" :preview-src-list="[detail.picDangerTrans]"></el-image>
          <span class="label">危险化学品经营许可证</span>
        </div>
        <div class="img-box-item" v-if="detail.picOilLicense">
          <el-image append-to-body hide-on-click-modal :src="detail.picOilLicense" :preview-src-list="[detail.picOilLicense]"></el-image>
          <span class="label">油品经营许可证</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { getCustomerDetail } from '@/api/oilDepotCustomer'
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'detail',
  setup () {
    let detail = ref({})
    let loading = ref(false)
    const route = useRoute()
    const getInfo = async () => {
      const { id } = route.query
      loading.value = true
      const { code, result } = await getCustomerDetail({ id })
      loading.value = false
      if (code !== 200) return
      detail.value = result
    }
    getInfo()
    return { detail, loading }
  }
})

</script>

<style scoped lang="less">
  @import "@/assets/css/label-value.less";

  .title {
    height: 60px;
    line-height: 60px;
    background: #F8F8F8;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 500;
    color: #222222;
    padding-left: 15px;
    margin-bottom: 20px;
  }

  .img-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    .img-box-item {
      margin-left: 15px;
      margin-bottom: 20px;
      width: 300px;
      .el-image {
        border-radius: 4px;
        width: 90%;
        height: 70%;
        cursor: pointer;
        &:hover {
          box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.27);
          transform:scale(1.01);
          transition: 0.5s;
        }
      }
      .label {
        text-align: center;
        width: 100%;
        display: block;
        color: #666666;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
</style>
